<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>球场二级</title>
    <!--移动端meta设置 开始-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body class="mhome" >
<section class="xh-index-war">
    <a href="#" class="index-war-pic">
        <img src="image/public-banner1.png" alt=""/>
    </a>
</section>
<section class="xh-toggle-select clearfix">
    <div class="pt10 pl10 pr10">
        <span class="pa posi-l5">
            <img src="image/zuqiu-icon_03.jpg" height="21">
         </span>
        <h2 class="pl30 fzrem2">顺德大球场</h2>
        <p class="pl30 fzrem0">活动公告：买3送一</p>
        <h3 class="select-qiuchan">场次预订</h3>   
    </div>
    <!-- 场次预定 S-->
    <div class="select-day-wrap clearfix">
      <div class="wrap-week naative-auto ">
            <ul class="xp-select-box clearfix">
                <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
                 <li>
                    <h4 class="week-title mt5">周四</h4> 
                    <p class="date-days">09月01日</p>
                    <span class="week-btns">预定</span>    
                </li>
               
            </ul>
       </div> 
    </div>
    <!-- 场次预定 E-->
</section>
<!--联系方式 S-->
<section class="fground pl50">
    <p class="pr cross-line pt10 pb10 xp-contact-lis">
        <span class="icon-phone pa">
            <img src="image/icon-ph.jpg" width="100%"></span>
        13812345678</p>
    <p class="pr pt10 pb10 xp-contact-lis">
        <span class="icon-address pa">
            <img src="image/icon-ad.jpg" width="100%">
        </span>
       地址：顺德区大良凤山路2号
    </p>
</section>
<!--联系方式 E-->

<!--球场简介 S-->
<section class="mt20 fground pl20  pt20 pb10">
    <h3 class="fzrem1 pr cross-line pb10">球场简介</h3> 
    <p class="fzrem0 mt10 pr20">足球，有“世界第一运动”的美誉，是全球体育界最具影响力的单项体育运动。标准的足球比赛由两队各派10名球员与1名守门员，在长方形的草地球场上对抗、进攻。</p>
</section>
<!--球场简介 E-->
<!-- 球场环境 S-->
<section class="fground pl20 mt20">
    <div class="pr cross-line pt10 pb10 clearfix"> 
        <span class="fl">球场环境:</span>
        <ul class="flowrs-list clearfix ml10">
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            
        </ul>
    </div>      
    <div class="pr pt10 pb50 h200">
        <span class="fl">球场服务:</span>
        <ul class="flowrs-list clearfix ml10">
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>
            <li><img src="image/flowrs-pic.jpg" width="100%"></li>            
        </ul>
    </div>
</section>
<!-- 球场环境 E-->


<!-- 底部导航 S-->
<div class="nav-tabs">
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-home.png" width="100%">
                </i>
                <span class="fzrem">首页</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-clueb.png" width="100%">
                </i>
                <span class="fzrem">球队</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-list.png" width="100%">
                </i>
                <span class="fzrem">订单</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-my.png" width="100%">
                </i>
                <span class="fzrem">我的</span>
            </p>
        </a>
    </div>
</div>
<!--底部导航 E-->
<!-- 悬浮菜单 S-->
<div class="selectItem">
    <div class="choose_but pa">
        <span class="close-select pa">×</span>
    </div>
    <ul>
        <li>
            <a class="fzrem" href="##">宝贝</a>
        </li>
        <li>
            <a class="fzrem" href="##">裁判</a>
        </li>
        <li>
            <a class="fzrem" href="##">球员</a>
        </li>
        <li>
            <a class="fzrem" href="##">球队</a>
        </li>
        <li>
            <a class="fzrem" href="##">球场</a>
        </li>
    </ul>
</div>
<!-- 悬浮菜单 E-->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/selectItem.js"></script>
<script>
    $(function () {
        $.fn.arrWidth = function(){
            var $this = $(this)
            var  arrDom= $this.children()
            var arrWidth= arrDom.length*arrDom.width()+ arrDom.length*12;
            $this.width(arrWidth);
        }     
        $(".xp-select-box").arrWidth()
        $(".selectItem").selectItem({
            intervals:-12,
            isSwiper:true,
            animate:100,
            isOpen:true,
        });
    })
</script>
</body>
</html>